<template>
  <div>
    <el-form :model="pageForm" label-width="80px" :rules="pageFormRules" ref="pageForm">
      <el-form-item label="所属站点" prop="siteId">
        <el-select v-model="pageForm.siteId" placeholder="请选择站点">
          <el-option
            v-for="item in siteList"
            :key="item.siteId"
            :label="item.siteName"
            :value="item.siteId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="模版名称" prop="templateName">
        <el-input v-model="pageForm.templateName" auto-complete="off" ></el-input>
      </el-form-item>
      <el-form-item label="模版参数" prop="templateParameter">
        <el-input v-model="pageForm.templateParameter" auto-complete="off" ></el-input>
      </el-form-item>
      <el-form-item label="模版文件" prop="templateFileId">
        <el-input v-model="pageForm.templateFileId" :disabled="true"  auto-complete="off" ></el-input>
      </el-form-item>

    </el-form>
    <el-upload drag multiple
               name="multipartfiles"
    ref="upload"
    :limit="limit"
    :action="imageAction"
    :onError="uploadError"
    :onSuccess="uploadSuccess"
    :auto-upload="true">
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">将模版拖到此处，或<em>点击上传</em></div>
    </el-upload>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="addSubmit">提交</el-button>
      <el-button type="primary" @click="goBack">返回</el-button>
    </div>
  </div>

</template>

<script>
  import cmsApi from "../api/cms"
  export default {
    data() {
      return {
        imageAction: "/api/cms/template/save",
        limit: 1,
        siteList:[],
        templateList:[],
        pageForm: {
          site: '',
          templateName: '',
          templateParameter: '',
          templateFileId: ''
        },
        pageFormRules: {
          siteId: [
            {
              required: true,
              message: '请选择站点',
              trigger: 'blur'
            }
          ],
          templateFileId: [
            {
              required: true,
              message: '请上传模版',
              trigger: 'blur'
            }
          ]
        }
      }
    },
    methods:{
      uploadSuccess (response, file, fileList) {
        this.pageForm.templateFileId = response
        console.log('上传成功')
      },
      uploadError (response, file, fileList) {
        this.$message.error('上传失败！')
      },
      addSubmit:function () {
        this.$refs['pageForm'].validate((valid) => {
          if(valid) {

            this.$confirm('是否添加此页面','提示',{
              confirmButtonText: '确认',
              cancelButtonText: '取消'
            }).then(()=>{
              cmsApi.template_add(this.pageForm).then((res)=>{
                if(res.success) {
                  this.$message({
                    message: '提交成功',
                    type: 'success'
                  })
                  this.$refs['pageForm'].resetFields()
                } else {
                  this.$message({
                    message: res.message,
                    type: 'error'
                  })
                }
              })
            })

          }
        })

      },
      querySite:function () {
        cmsApi.site_list().then((res) => {
          if(res.success) {
            this.siteList = res.queryResult.list;
          }
        })
      },
      goBack:function () {
        this.$router.push({
          path:'/cms/template/list',
          query:{
            page:this.$route.query.page,
            siteId:this.$route.query.siteId
          }
        })
      },
      queryTemplate: function () {
        cmsApi.template_list().then((res) => {
          if(res.success) {
            this.templateList = res.queryResult.list;
          }
        })
      }
    },
    mounted(){
      this.querySite();
      this.queryTemplate();
    }
  }
</script>

<style>

</style>
